/*---------------------------------------------
	/ Main Styles
*/
:root {
	overflow: visible;
}

.new {
	opacity: 0;
	float: right;
	margin: 7px 0;
	min-width: 50px;
	transition: opacity .3s cubic-bezier(.4, 0, .2, 1);
}

:root:hover .new {
	opacity: 1;
}

.item {
	height: 38px;
	display: block;
	font-size: 13px;
	line-height: 16px;
	padding: 9px 15px;
	padding-left: 12px;
	position: relative;
	text-decoration: none;
	border-left: 3px solid transparent;
}

.item:hover {
	border-left-color: #1ABC9C;
	background: rgba(0, 0, 0, .03);
}

.dark .item:hover {
	background: rgba(0, 0, 0, 0.15);
}

.item.dragged {
	cursor: pointer;
	position: absolute;
	background: #F7F7F7;
}

.item.holder {
	border: 1px solid #F3F3F3;
	border-width: 1px 0;
}

.check {
	margin: 1px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	vertical-align: top;
}

.check:after {
	top: -9px;
	border: 0;
	left: -15px;
	right: -5px;
	content: "";
	width: auto;
	height: auto;
	bottom: -9px;
	transform: none;
	position: absolute;
}

.check:checked {
	background: none;
	box-shadow: none;
}

.check:checked:before {
	top: -1px;
	left: -1px;
	right: -1px;
	bottom: -1px;
	position: absolute;
	content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="#1ABC9C" viewBox="0 0 20 20"><path d="M10,1.667c-4.604,0-8.333,3.729-8.333,8.333S5.396,18.333,10,18.333s8.333-3.729,8.333-8.333S14.604,1.667,10,1.667z M10,16.667c-3.683,0-6.667-2.984-6.667-6.667c0-3.683,2.983-6.667,6.667-6.667c3.683,0,6.667,2.983,6.667,6.667 C16.667,13.683,13.683,16.667,10,16.667z M15,7.933l-6.429,6.428l-1.428-1.428L5,10.789L6.429,9.36l2.143,2.144l5-5L15,7.933z" /></svg>');
}

.item .title {
	font: inherit;
	overflow: hidden;
	margin-left: 5px;
	border: 0!important;
	padding: 0!important;
	display: inline-block;
	vertical-align: middle;
	text-overflow: ellipsis;
	background: rgba(0, 0, 0, 0);
	width: calc(100% - 30px)!important;
}

.item:hover .title {
	width: calc(100% - 100px)!important;
}

.item.done .title,
.item.important.done .title {
	color: #888;
	text-decoration: line-through;
}

.dark .item.done .title,
.dark .item.important.done .title {
	color: #AAA;
}

.tools {
	top: 0;
	right: 0;
	bottom: 0;
	opacity: 0;
	font-size: 20px;
	line-height: 20px;
	position: absolute;
	font-family: Entypo;
	padding: 10px 10px 10px 0;
}

.item:hover .tools,
.item.dragged .tools {
	opacity: 1;
}

.tools span {
	opacity: .8;
	padding: 0 5px;
}

.tools .delete:hover {
	color: #E43431;
	cursor: pointer;
}

.tools .move:hover {
	cursor: move;
}






/*---------------------------------------------
	/ Done and Important styles
*/
.item.important {
	background-color: #FFECEC;
}

.dark .item.important {
	background-color: #443B3B;
}

.dark.transparent .item.important {
	background-color: rgba(228, 4, 0, 0.35);
}

.item.important .title {
	color: #E40400;
}





/*---------------------------------------------
	/ Tags
*/
.tags {
	top: 85%;
	z-index: 1;
	opacity: 0;
	color: #444;
	font-size: 12px;
	min-width: 100px;
	background: #FFF;
	line-height: 15px;
	position: absolute;
	visibility: hidden;
	right: calc(100% - 30px);
	font-family: Open Sans, sans-serif;
	box-shadow: 0 1px 1px rgba(0, 0, 0, .15);
	transition: opacity .2s .2s, visibility 0s .4s;
}

.tags:hover,
.tools .tag:hover ~ .tags {
	opacity: 1;
	visibility: visible;
	transition: opacity .2s 0s, visibility 0s 0s;
}

.tags div {
	padding: 5px 10px;
	cursor: pointer;
}

.tags div:hover {
	background: #F7F7F7!important;
}